import React from 'react';
import { useHistory } from "react-router-dom";
import IconButton from '@compa/IconButton';
import './index.css';
const data = ['发现', '播客', '我的', '歌房', '云村'], paths = ['finding', 'podcast', 'me', 'ktv', 'cloud'];
const pages = data.map((t, i) => ({
    title: t,
    path: paths[i]
}))

const BottomNavBar = ({  }) => {
    let history = useHistory();
    console.log("BottomNavBar init")
    function handleBtnClick(e) {
        let currentNodeId = e.target.getAttribute('id'),
            id = currentNodeId ? currentNodeId : e.target.parentNode.getAttribute('id'),
            index = parseInt(id.split('-')[1]);
        history.push(`${paths[index]}`);
    }
    return (
        <div className="bottom-navbar-container" onClick={(e) => handleBtnClick(e)}>
            
            {
                pages.map((o, i) => (
                    <IconButton key={`iconbtn-${i}`} index={i} text={o.title} path={o.path} />
                ))
            }
        </div>
    );
}
function areEqual(prevProps, nextProps) {
    return prevProps.shouldUpdate === nextProps.shouldUpdate;
}
export default React.memo(BottomNavBar, areEqual); 